import React, { Component } from 'react'
import {connect} from 'react-redux';
import {allShop_action, detail_action} from '../../../store/store';
import {Link} from 'react-router-dom';
class AllShop extends Component {
    componentDidMount(){
        this.props.shop()
    }
    render() {
        return (
            /* 渲染所有商店 */
            <div className='allshop'>
                {this.props.list.map((item,index)=>{
                    return(
                        <Link className="shop" key={item.shop.id} to='/detail' onClick={()=>{this.props.detshop(item.shop.id)}}>
                            <div className="img">
                                <img src={item.shop.pic} alt=""/>
                            </div>
                            <div className="txt">
                                <h4>{item.shop.name}</h4>
                                <p>月销量：{item.shop.num}</p>
                                <p>距离：{item.shop.city}km</p>
                            </div>
                        </Link>
                    )
                })}
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            list:state.allshop
        }
    },
    (dispatch)=>{
        return {
            shop:()=>{
                dispatch(allShop_action())
            },
            detshop:(id)=>{
                dispatch(detail_action(id))
            }
        }
    }
)(AllShop)
